<template>
	<view class="login-password-forget">
		<view class="forget-body">
			<view class="forget-body-content">
				<view class="forget-body-top">
					<input type="text" v-model="teloremail" placeholder="手机号/邮箱"/>
						<view class="erro-content" v-if="falseFlag">
							<text>手机号或邮箱格式错误!</text>
						</view>
				</view>
				<view class="forget-body-bottom">
					<button type="warn" @click="submitUserInfo()">下一步</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const teloremail = ref("")
	
	const testUserInfo = (value) =>{
		const regTel = /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
		const regEmail =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
		let userdata = value
		if(userdata == "" || userdata == undefined || userdata == null){
			return false
		}else{
			if(regTel.test(userdata)){
				return true
			}else if(regEmail.test(userdata)){
				return true
			}
			return false
		}
	}
	
	const falseFlag = ref(false)
	const toForgetPasswordSecond = (data) =>{
		uni.navigateTo({
			url:'/pages/Login/LoginPasswordForget/LoginPasswordForgetSecond?data='+data
		})
	}
	const submitUserInfo = () =>{
		falseFlag.value = !testUserInfo(teloremail.value)
		// console.log(falseFlag.value);
		// console.log(testUserInfo(teloremail.value));
		if(!(falseFlag.value)){
			toForgetPasswordSecond(teloremail.value)
		}
		
	}
	
 </script>

<style lang="scss" scoped>
	
	
	uni-button[type='warn']{
		background-color: #1aa034;
		color: rgba(255,255,255,0.9);
		width: 100%;
	}
	
.forget-body{
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 50rpx ;
	>.forget-body-content{
		width: 90%;
		display: flex;
		flex-direction: column;
		font-weight: 600;
		.forget-body-top{
			width: 100%;
			height: 68rpx;
			border-bottom: 2rpx #e1e1e1 dotted;
			.erro-content{
				font-size: 20rpx;
				color: rgb(227, 64, 50);
			}
		}
		.forget-body-bottom{
			margin-top: 50rpx;
		}
	}
}
</style>
